<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #box {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body onload="threeExcute();">
<div id="box"></div>

<script src="http://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script>
    var renderer, scene, camera, light;
    var width, height;

    //初始化渲染器
    function initRenderer() {
        width = document.getElementById("box").clientWidth;
        height = document.getElementById("box").clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias: true
        }); /*生成渲染器对象（属性：抗锯齿效果为设置有效）*/
        renderer.setSize(width, height);
        document.getElementById("box").appendChild(renderer.domElement);
        /*设置canvas背景色(clearColor)和背景色透明度（clearAlpha） */
        renderer.setClearColor('#428bca', 0.5);
    }
    //初始化场景
    function initScene() {
        scene = new THREE.Scene();
    }
    //初始化照相机
    function initCamera() {
        camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
        //定义camera的位置
        camera.position.set(4, -3, 5);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        //这里的lookAt函数是将视角指定为看原点
        //将camera添加到scene中
        scene.add(camera);
    }
    //初始化光源
    function initLight() {
        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); //平行光
        light.position.set(100, 100, 200); //设置光源位置
        scene.add(light); //将官员添加到场景

        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( 100, 1000, 100 );

        spotLight.castShadow = true;

        spotLight.shadow.mapSize.width = 1024;
        spotLight.shadow.mapSize.height = 1024;

        spotLight.shadow.camera.near = 500;
        spotLight.shadow.camera.far = 4000;
        spotLight.shadow.camera.fov = 30;

        scene.add( spotLight );
    }

    function threeExcute() {
        //初始化渲染器
        initRenderer();
        //初始化场景
        initScene();
        //初始化照相机
        initCamera();
        //初始化光源
        initLight();


        //这里是创建一个长方形
        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: "green",
                wireframe: true //这里指不使用实心材料，所以为true
            })
        );
        //这里要将这个长方形加入这个scene中
        scene.add(cube);

        //渲染应该使用渲染器，结合相机和场景来得到结果画面。
        renderer.render(scene, camera);
    }
</script>
</body>

</html>
